<template>
  <el-row class="tac">
    <el-col :span="4">
      <el-menu class="el-menu-vertical-demo" default-active="1-1" unique-opened @open="handleOpen" @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <img v-if="activeSubMenu !== '1'" src="./img/icon-device-gray.svg" alt="">
              <img v-if="activeSubMenu == '1'" src="./img/icon-device-light.svg" alt="">
            </el-icon>
            <span :class="activeSubMenu == '1' ? 'active' : 'notactive'">设备管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index='1-1' @click="handler('1-1')">设备列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <img v-if="activeSubMenu !== '2'" src="./img/icon-product-gray.svg" alt="">
              <img v-if="activeSubMenu == '2'" src="./img/icon-product-light.svg" alt="">
            </el-icon>
            <span :class="activeSubMenu == '2' ? 'active' : 'notactive'">产品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" :class="activeSubMenu == '2' ? 'active' : 'notactive'" @click="handler('2-1')">产品列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <img v-if="activeSubMenu !== '3'" src="./img/icon-basic-gray.svg" alt="">
              <img v-if="activeSubMenu == '3'" src="./img/icon-basic-light.svg" alt="">
            </el-icon>
            <span :class="activeSubMenu == '3' ? 'active' : 'notactive'">基础信息管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1" :class="activeSubMenu == '3' ? 'active' : 'notactive'" @click="handler('3-1')">标签列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <div v-if="showSubMenu == '1-1'">
        <!-- <el-table :data="tableData" :header-cell-style="{ color: '#595959' }" style="width: 97%;margin-left:30px;margin-top:40px;" max-height="670px">
          <el-table-column prop="AccountName" label="设备图" width="100" />
          <el-table-column prop="UserName" label="设备名称" />
          <el-table-column prop="UserGradeName" label="先见/永创订单" />
          <el-table-column prop="UserMobile" label="设备标签" />
          <el-table-column prop="CreatedDate" label="出厂时间" width="160" :formatter="formatDate" />
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="{ row }">
              <el-button class="hovercolor" style="border:none;margin-left: 0;" size="small" @click="handlerEditDevice(row)"><span>编辑</span></el-button>|
              <el-button class="hovercolor" style="border:none;margin-left: 0;" size="small" @click="handlershowDevice(row)"><span>查看</span></el-button>|
              <el-button class="hovercolor" style="border:none;margin-left: 0;" size="small" @click="handlerExportDevice(row)"><span>导出</span></el-button>|
              <el-popconfirm :title="`确定删除 ${row.AccountName} 吗?`" @confirm="handlerDeleteDevice(row)" :icon="InfoFilled">
                <template #reference>
                  <el-button style="border:none;margin-left: 0;" size="small" class="hovercolor"><span>删除</span></el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table> -->

        <el-table :data="allTerminalInfo" :header-cell-style="{ color: '#595959' }" style="width: 97%;margin-left:30px;margin-top:40px;" max-height="670px">
          <el-table-column prop="ProductName" label="产品名称" width="250" />
          <el-table-column prop="ProductModel" label="产品型号" />
          <el-table-column prop="DeviceName" label="设备名称" />
          <el-table-column prop="DeviceSerialNo" label="设备序列号" />
          <el-table-column prop="TerminalName" label="终端名称" />
          <el-table-column prop="TerminalIdentity" label="终端标识符" />
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="{ row }">
              <el-button size="small" @click="handlerexportTerminal(row)">导出</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div v-if="showSubMenu == '2-1'">
        <el-table :data="tableData" :header-cell-style="{ color: '#595959' }" style="width: 97%;margin-left:30px;margin-top:40px;" max-height="670px">
          <el-table-column prop="AccountName" label="产品图" width="100" />
          <el-table-column prop="UserName" label="产品名称" />
          <el-table-column prop="UserGradeName" label="产品型号" />
          <el-table-column prop="UserMobile" label="产品标签" />
          <el-table-column prop="UserMobile" label="所属行业 " />
          <el-table-column prop="CreatedDate" label="创建时间" width="160" :formatter="formatDate" />
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="{ row }">
              <el-button class="hovercolor" style="border:none;margin-left: 0;" size="small" @click="handlerEditProduct(row)"><span>编辑</span></el-button>|
              <el-button class="hovercolor" style="border:none;margin-left: 0;" size="small" @click="handlershowProduct(row)"><span>查看</span></el-button>|
              <el-popconfirm :title="`确定删除 ${row.AccountName} 吗?`" @confirm="handlerDeleteProduct(row)" :icon="InfoFilled">
                <template #reference>
                  <el-button style="border:none;margin-left: 0;" size="small" class="hovercolor"><span>删除</span></el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="showSubMenu == '3-1'">
        标签列表
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
//用户登录相关的小仓库
import { useDevicesStore } from "@/stores/devices";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 获取设备小仓库
const devicesStore = useDevicesStore();

const activeSubMenu = ref() // 一级菜单激活

const showSubMenu = ref('1-1')// 控制右边显示的内容
const exportInfoValue = ref()
// 菜单栏打开的事件
const handleOpen = (key: string, keyPath: string[]) => {
  activeSubMenu.value = key
}
// 菜单栏关闭的事件
const handleClose = (key: string, keyPath: string[]) => {
  activeSubMenu.value = "0"
}

// 控制右边显示的内容的事件
const handler = (index: any) => {
  showSubMenu.value = index
}
// 获取所有终端
const AllTerMinal = () => {
  devicesStore.allTerminal()
}

// 从仓库中拿数据
const allTerminalInfo: any = ref(computed(() => devicesStore.$state.allTerminalInfo));

const fun = () => {
  const exportInfo = ref(computed(() => devicesStore.$state.exportInfo));
  exportInfoValue.value =exportInfo
  console.log("🚀 ~ file: systemdialog.vue:158 ~ fun ~ exportInfoValue.value :", exportInfoValue.value?.value )
}

// 导出按钮的事件
const handlerexportTerminal = async (row: any) => {
  row.TerminalId && await devicesStore.exportTerminal(row.TerminalId)
  await fun()
  // 将对象内容转换为JSON字符串
  const jsonString = JSON.stringify(exportInfoValue.value?.value);
  // 创建Blob对象
  const blob = new Blob([jsonString], { type: 'application/json' });
  // console.log("🚀 ~ file: systemdialog.vue:168 ~ handlerexportTerminal ~ blob:", blob)
  

  // 创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = `${row.DeviceSerialNo}_${row.TerminalIdentity}.json`;

  // 模拟点击下载链接
  downloadLink.click();

  // 释放URL对象
  URL.revokeObjectURL(downloadLink.href);
}

onMounted(() => {
  AllTerMinal()
})
</script>

<style scoped>
.active {
  color: #f2994a
}

.notactive {
  color: black
}

/*清除一级标题下方的边距*/
:deep(.el-menu-item-group__title) {
  padding: 0;
}

:deep(.el-col-4) {
  height: 100vh;
  border-right: 1px solid #dcdfe6;
}

/*列表的最小宽度*/
:deep(.el-menu-item) {
  min-width: 0;
}

/* 鼠标滑过 */
:deep(.el-menu--vertical .el-menu-item:hover) {
  background: #edebe8 !important;
}

:deep(.el-menu-item.is-active) {
  background: #fff9f0;
  border-right: 1px solid #f2994a;
  color: #f4a673;
}


.tac {
  height: 100%;
  
}
</style>
